<template>
 <div class="common-layout">
    <el-container>
      <el-header>
        <h1>更换头像</h1>
     </el-header>
      <el-main>
        <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/user/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
        </el-upload>
          
          <el-button class="ml-3" style="margin-top: 20px"
          type="success" @click="submitUpload">
               上传图片
          </el-button>
      </el-main>
    </el-container>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
// 引入 pinia
import { useUserStore } from '@/stores/token.js'
// 引入 useRouter
import { useRouter } from 'vue-router'; 
// 在 setup 中获取 router 实例
const router = useRouter();

// 引入请求
import { saveupload } from '@/api/login'

const us = useUserStore() // 获取容器对象
console.log(us.denglu) // 获取容器对象中的数据
// 获取用户头像
console.log(us.denglu.userPic)

// 初始化数据
const imageUrl = ref(us.denglu.userPic)
const tupian = ref('') // 将 tupian 定义为响应式数据

// 回调成功
const handleAvatarSuccess = (res, file) => {
  console.log(res)
  imageUrl.value = URL.createObjectURL(file.raw)
  tupian.value = res.data // 更新 tupian 的值
  aa.value = tupian.value
  console.log('tupian:', tupian.value)
}

// 上传前验证
const beforeAvatarUpload = (file) => {
  const isJPG = file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    ElMessage.error('上传头像图片只能是 PNG 格式!')
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!')
  }
  return isJPG && isLt2M
}

// 上传图片
const submitUpload = async () => {
  if (!tupian.value) {
    ElMessage.warning('请先上传图片')
    return
  }

  // 封装参数
  const canshu = {
    userPic: tupian.value,
    id: us.denglu.id,
  }

  console.log('提交的参数:', canshu)

  // 调用后端接口
  try {
    const res = await saveupload(canshu) // 假设 save 是调用后端接口的方法
    console.log('上传成功:', res)
    ElMessage.success('上传成功')
    us.denglu.userPic = tupian.value
    // 使用 Vue Router 跳转到首页
  } catch (error) {
    console.error('上传失败:', error)
    ElMessage.error('上传失败')
  }
}
</script>


<style lang='scss' scoped>
    .common-layout{
        border: 2px green solid; 
        width: 1000px;
        height: 600px;
        box-shadow: 0px 0px 5px 5px gainsboro;
    }
    .el-header{
         display: flex;
         border-bottom: 2px gainsboro solid;
    }
    .avatar-uploader {
    :deep() {
        .avatar {
            width: 200px;
            height: 278px;
            display: block;
            border-radius: 6px;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 278px;
            height: 278px;
            text-align: center;
        }
    }
}
</style>